import React ,{Component} from 'react';
import { connect } from 'react-redux';
import { actionCreators } from '../store/index';
import {
    Recommended,
} from '../style.js';

class RecommendedComponent extends Component {
   
   showUsersList = ()=>{
       let newUsersList = [];
       let newUsers = this.props.users.toJS();
       let page = this.props.usersPage;
       for(let i = (page - 1)*5;i < page*5 ;i++){

           newUsers[i] && newUsersList.push(
            <li key={newUsers[i].id}>
                <div className="boxImg">
                    <img src={newUsers[i].avatar_source} alt=""/>
                </div>
                <div className="contentText">
                    <div className="title_name">
                        <span className="name">{newUsers[i].nickname}</span>
                        {
                            newUsers[i].is_following_user?<span className="followed" onClick={()=>{this.props.handleFollowUser(newUsers[i].id)}}>已关注</span>:<span className="care" onClick={()=>{this.props.handleFollowUser(newUsers[i].id)}}>+关注</span>
                        }
                    </div>
                   <p className="aticre">写了{newUsers[i].total_wordage}字~{newUsers[i].total_likes_count}喜欢</p>
                </div>
            </li>
        )  
       }
       return newUsersList;
   }

    render (){
        const { users ,usersPage,changeUserList,allUsersPage} = this.props;
        return (
            <Recommended>
                      <div className="title">
                        <span>推荐作者</span>
                        <span onClick={()=>{changeUserList(usersPage,allUsersPage)}}>换一批</span>
                      </div>
                      <ul className="list">
                      { this.showUsersList() }
                      </ul>
            </Recommended>
        )
    }
}

const mapStateToProps = (state)=>{
    return {
      users:state.getIn(['home','users']),
      usersPage:state.getIn(['home','usersPage']),
      allUsersPage:state.getIn(['home','allUsersPage'])
    }
};
const mapDispathToProps = (dispath)=>{
    return {
        changeUserList(page,allUsersPage){
          if(page < allUsersPage){
              dispath(actionCreators.changeUserPage(page+1))
          }else{
            dispath(actionCreators.changeUserPage(1))
          }
        },
        handleFollowUser(id){
           dispath(actionCreators.handleFollowUser(id))
        }
    }
}

export default connect(mapStateToProps,mapDispathToProps)(RecommendedComponent);